<template>
	<view class="address-book-item" v-if="userInfo.length>0">
		<text class="address-book-item--header">{{title}}</text>
		<checkbox-group @change="changeChecked">
				<UserInfo v-for="item in userInfo" :key="item.id" :item="item" :isSelect="isSelect" />
		</checkbox-group>
	</view>
</template>

<script setup>
	import UserInfo  from '@/components/address-books/UserInfo.vue'
	import {ref,inject} from 'vue';
	const props = defineProps({
		title:{
			type:String,
			required:true
		},
		userInfo:{
			type:Array,
			defualt:[]
		}
	})
	
	const isSelect =inject("isSelect")
	
	function changeChecked(e){
		console.log(e)
	}
	
</script>

<style lang="scss" scoped>
.address-book-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			&--header{
				font-size: 20upx;
				color: #aaa;
				padding: 10upx 20upx;
			}

		}
</style>